<%@ page language="java" import="java.util.*" pageEncoding="utf-8" contentType="text/html; charset=utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<style type="text/css">
#header {
	width: 960px;
	height: 140px;
	margin: auto;
	
	background: url(images/img02.gif);
	}

#header h1, #header p {
	margin: 0;
	
	
}

#header h1 {
	float:left;
	font-weight:bold;
	color:#9966FF;
	padding: 58px 0 0 30px;
	text-transform:capitalize;
	line-height: 72px;
	font-size: 60px;
	font-family:"Courier New", Courier, monospace;
}

#header p {
	float: right;
	padding: 102px 0 0 0;
	text-transform: uppercase;
	font: bold 15px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#9966FF;
}

#header p a {
	font-size: 167%;
}

#header a {
	border: none;
	color: #000000;
}



#menu {
	width: 960px;
	margin: -22px auto 20px auto;
	padding: 1px 0px 0px 0px;
	border-bottom: 5px solid ;
	border-bottom-color:#9966FF;
}

#menu ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
	text-align: right;
}

#menu li {
	display: inline;
}

#menu a {
	padding: 0px 10px 0px;
	border: 2px dotted;
	border-bottom-style:hidden;
	border-bottom-color:#9966FF;
	background-color: #FAFAFA;
	text-decoration: none;
	font-weight: bold;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}

#menu a:hover {
	background-color:orange;
	color: #FFFFFF;
}
body {
margin: 0 auto;
width: 970px;
text-align:center;
padding: 0px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;


}

form{
margin-top:50px;
margin-left:210px;
}

#page{
width:960px;
text-align:left;
}
p{
color:#FF6600;
margin-top:20px;
margin-left:10px;

border:dotted #FF6600 3px;
width:250px;

}
a{
color:#330066;
text-decoration:none;
}
a:hover{background:#663399;
color:#FFFFFF;}
.submit input
{
margin-left: 4.5em;
} 
input
{
color: #781351;
background: #fee3ad;
border: 1px solid #781351
}

.submit input
{
color: #000;
background:#FFFFFF;
border: 2px outset #d7b9c9
} 
fieldset
{
border: 1px solid #781351;
width: 500px;
background-image:url('images/img21.jpg');
}

legend
{

color: #fff;
background:#6633FF;
border: 2px solid;
padding: 2px 6px
}

#footer {
	clear: both;
	width: 892px;
	margin: 200px auto 0 auto;
	padding: 30px 0;
	background: url(images/img20.gif) repeat-x;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}

#footer h3 {
	margin: 0;
	text-align: center;
	text-transform: lowercase;
	color:#9966FF;
	font-size:18px;

}
#footer a{
	color:#669900;
	text-decoration: none;
	font-family:Arial, Helvetica, sans-serif;
	}
#footer a:hover {
	color:white;
}
</style>

  <head>
    <base href="<%=basePath%>">
    
    <title>MyNews--用户登录</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

  </head>
  <SCRIPT>
var intTimeStep=10;
var isIe=(window.ActiveXObject)?true:false;
var intAlphaStep=(isIe)?5:0.05;
var curSObj=null;
var curOpacity=null;
var stopTime=0;
function startObjMessageName(objId)
{
var name=document.getElementById("userId");
if(name.value.length==0){
curSObj=document.getElementById(objId);
if(isIe){curSObj.style.cssText='DISPLAY: none; Z-INDEX: 1; FILTER: alpha(opacity=0); POSITION: absolute;';}
setMessage();
}
}

function startObjMessagePwd(objId)
{
var userPass=document.getElementById("password");
if(userPass.value==""){
curSObj=document.getElementById(objId);
if(isIe){curSObj.style.cssText='DISPLAY: none; Z-INDEX: 1; FILTER: alpha(opacity=0); POSITION: absolute;';}
setMessage();
}
}


function setMessage()
{
if(isIe){curSObj.filters.alpha.opacity=0;}
else{curOpacity=0;curSObj.style.opacity=0}
curSObj.style.display='';
setMessageShow();
}
function setMessageShow()
{
if(isIe)
{
curSObj.filters.alpha.opacity+=intAlphaStep;
if (curSObj.filters.alpha.opacity<100) {setTimeout('setMessageShow()',intTimeStep);}
else{stopTime+=10;if(stopTime<500){setTimeout('setMessageShow()',intTimeStep);}else{stopTime=0;setMessageClose();}}
}else
{
curOpacity+=intAlphaStep;
curSObj.style.opacity =curOpacity;
if (curOpacity<1) {setTimeout('setMessageShow()',intTimeStep);}
else{stopTime+=10;if(stopTime<200){setTimeout('setMessageShow()',intTimeStep);}else{stopTime=0;setMessageClose();}}
}
}
function setMessageClose()
{
if(isIe)
{
curSObj.filters.alpha.opacity-=intAlphaStep;
if (curSObj.filters.alpha.opacity>0) {
setTimeout('setMessageClose()',intTimeStep);
}
else {
curSObj.style.display='none';
}
}
else
{
curOpacity-=intAlphaStep;
if (curOpacity>0) {
curSObj.style.opacity =curOpacity;
setTimeout('setMessageClose()',intTimeStep);
}
else {
curSObj.style.display='none';
}
}
}
</SCRIPT>
  <body>
  
  <div id="header">
	<h1>my NEWS</h1>
</div>

<div id="menu">
	<ul>
		<li><a href="home.do" accesskey="1" title="">我的首页</a></li>
		<li><a href="catagory.do" accesskey="2" title="">分类新闻</a></li>
		<li><a href="subscription.do" accesskey="3" title="">我的订阅</a></li>
		<li><a href="login.jsp" accesskey="4" title="">登录</a></li>
		<li><a href="register.jsp" accesskey="5" title="">注册</a></li>
	</ul>
</div>
<div id="page">
   <p>还没有注册，请点击这里<a href='register.jsp'>注册</a></p>
<FORM id="form1" name="form1" action ="login.do" method=post>
<fieldset>
<legend>登陆</legend>
<TABLE width="554" height="120" border="0" align="center">
	<TBODY>
		<TR>
			<td width="300"><div align="right">用户名：</div></td>
			<TD><label>
			<INPUT type="text" name="userId" size="20" onblur="startObjMessageName('objDiv')"></label></TD>
			  <td width="300">
    <DIV id="objDiv" style="DISPLAY:none; POSITION: relative;">
    <a style=" color: red">用户名不能为空</a></DIV>
   </td>
			
		</TR>
		<TR>
			 <td><div align="right">密码：</div></td>
			<TD><label>
			<INPUT type="password" name="password" size="20" onblur="startObjMessagePwd('PWD_DIV')"></label></TD>
			 <td>
   <DIV id="PWD_DIV" style="DISPLAY:none; POSITION: relative;">
    <a style=" color: red">密码不能为空</a></DIV>
   </td>	
		</TR>
		<tr><td></td><td><input type="checkbox" name="auto" value="auto"/><span style="font-size:13px">&nbsp;&nbsp;自动登录</span></td></tr>
		 <tr>
      <td><label></label></td>
      <td><label>
        <input type="submit" name="submit" value="登陆" style="width: 100px;"/>
      </label></td>
    </tr>
		
	</TBODY>
</TABLE>
 </fieldset>
</FORM>
</div>
<div id="footer">
	<h3>Copyright (c) 2009 All Rights Reserved. Design by <a href="http://www.ss.pku.edu.cn/">北京大学</a>.</h3>
</div>

  </body>
</html>
